<template>
	<view class="content">
		<view v-if="hasLogin">
			<swiper style="height: 480upx;" indicator-dots="true" class="sw" :autoplay="true">
				<swiper-item v-for="(sw,index) in swipers" :key="index">
					<image style="width: 100%;" :src="sw"  mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
			<view class="main">
				<view class="main-title">
					<uni-icons class="main-title-icon" type="list" size="25" color="blue"></uni-icons>
					<view class="main-title-txt">资源列表</view>
				</view>
				<uni-grid :column="3" @change="change">
				    <uni-grid-item v-for="(item,index) in grids" :index="item.index" :key="item.id">
				        <view  class="grid-item">
							<uni-icons :type="item.name" size="50" color="#00aa7f"></uni-icons>
							<view style="color:#00aa7f ;">{{item.txt}}</view>
						</view>
				    </uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<view v-if="!hasLogin" class="hello">
			<view class="title">
				您好 游客。
			</view>
			<view class="ul">
				<view>未登录不能浏览本平台的资源</view>
				<view>在 “我的” 中点击 “登录” 可以 “登录您的账户”</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import uniGrid from "@/components/uni-grid/uni-grid.vue";
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue";

	export default {
		components:{uniIcons,uniGrid,uniGridItem},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		data() {
			return {
				swipers: [],
				grids:[
					{
					name:'image',
					txt:'图片',
					index:0
				},{
					name:'videocam',
					txt:'视频',
					index:1
				},{
					name:'mic',
					txt:'音频',
					index:2
				},{
					name:'compose',
					txt:'文档',
					index:3
				},{
					name : 'upload',
					txt: '上传',
					index : 4
				},{
					name: 'trash',
					txt: '回收站',
					index: 5
				}]
			}
		},
		onLoad() {
			var serverUrl=this.serverUrl;
			// 向服务器请求轮播图
			uni.request({
				url: serverUrl + 'app/swiper',
				method: 'GET',
				data: {},
				success: res => {
					var result=res.data;
					this.swipers=result.map(item =>{
						return serverUrl+"sysFile/app/download?fileUuid="+item.fileUuid;
					});
				}
			});
			if (!this.hasLogin) {
				uni.showModal({
					title: '未登录',
					content: '您未登录，需要登录后才能继续',
					/**
					 * 如果需要强制登录，不显示取消按钮
					 */
					showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							/**
							 * 如果需要强制登录，使用reLaunch方式
							 */
							if (this.forcedLogin) {
								uni.reLaunch({
									url: '../login/login'
								});
							} else {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						}
					}
				});
			}
		},
		methods:{
			change(e){
				var index=e.detail.index;
				switch (index){
					case 0:
						uni.navigateTo({
							url: '../imageList/imageList'
						});
						break;
					case 1:
						uni.navigateTo({
							url:'../videoList/videoList'
						});
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style>
	@import url("./main.css");
	.hello {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.title {
		color: #8f8f94;
		margin-top: 25px;
	}

	.ul {
		font-size: 15px;
		color: #8f8f94;
		margin-top: 25px;
	}

	.ul>view {
		line-height: 25px;
	}
</style>
